<template>
  <div class="app-container">
    <div class="versy_con">
      <h3>余额提现</h3>
      <div class="ver_hed">
        <table class="verhed_tab" width="1000">
          <tr>
            <td>可提现收益</td>
            <td>累计总收益</td>
            <td>礼物收益</td>
            <td>订单收益</td>
          </tr>
          <tr class="trver2" style="color:red;">
            <td>{{formInline.account}}元</td>
            <td>{{formInline.sumAccount}}元</td>
            <td>**元</td>
            <td>{{formInline.sumAccount}}元</td>
          </tr>
        </table>
      </div>
      <div class="tixian">
        <span class="tx_lef">
          <span>提现收益</span>
          <el-input v-model="inputMoney" placeholder="请输入提现金额" class="tx_inp" @blur="moneyChange"></el-input>
          <span style="color:red">元</span>
          <span style="color:purple;font-size:12px;" @click="allMoney"><a>全部提现</a></span>
        </span>
        <span class="tx_rig">
          <span>预计到账</span>
          <el-input v-model="inputExpected"  disabled class="tx_inp"></el-input>
          <span style="color:red">元</span>
         <!-- <span style="color:purple;font-size:12px;"><a>查看详细提现兑换规则</a></span>-->
        </span>
      </div>
      <div>
        <h5>信息确认</h5>
        <div class="xxqr_tab">
          <table>
            <tr>
              <td class="widddd4">名称</td>
              <td>
                {{formInline.name}}
              </td>
              <td class="widddd4">到账账户</td>
              <td v-show="showUpload">
                <el-select v-model="bankvalue" placeholder="请选择银行">
                  <el-option
                    v-for="item in tableData"
                    :key="item.id"
                    :label="item.way"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </td>
              <td v-show="alipayShow">
                {{alipay}}
              </td>
              <td></td>
            </tr>
            <tr>
              <td class="widddd4">
                是否提供发票
              </td>
              <td>
                 <div style="height:35px;"></div>
                <el-radio-group v-model="radio" @change="radioChange">
                  <el-radio :label="1">不提供发票<span style="color: red;"> &nbsp;&nbsp;(仅支持支付宝提现方式)</span></el-radio>
                  <br>
                  <el-radio :label="3">邮寄纸质发票</el-radio>
                  <br>
                  <el-radio :label="2">提供电子发票</el-radio>
                </el-radio-group>
              </td>
              <td  v-show="showPassword">提现密码</td>
              <td  v-show="showPassword"><el-input placeholder="请输入密码" v-model="password" @change="passwordChange" show-password></el-input></td>

              <td v-show="showPhone" class="widddd4">手机号验证</td>
              <td v-show="showPhone">{{formInline.phone}}</td>
<!--              <td v-show="showPhone">验证码</td>-->
<!--              <td v-show="showPhone"><el-button @click="getMsgCode">获取验证码</el-button>  </td>-->
<!--              <td><el-input v-model="msgInput" @change="codeChange" v-show="showPhone"></el-input></td>-->
              <!--<td style="font-size:12px;color:purple;" @click="changeValidate">更换验证方式</td>-->
            </tr>

            <tr>
              <td></td>
              <td></td>
              <td v-show="showPhone" class="widddd4">验证码</td>
              <td v-show="showPhone"><el-button v-show="show" @click="getMsgCode">获取验证码</el-button>
                <span v-show="!show" class="count">{{count}} s</span>
                <el-input v-model="msgInput" @change="codeChange" v-show="showPhone" class="elinput"></el-input>
              </td>
              <td></td>
            </tr>
            <tr></tr>
            <tr v-show="showUploadTr">
              <td class="widddd4">
                上传电子发票
              </td>
              <td>
                <el-upload
                  class="avatar-uploader"
                  :action="uploadUrl"
                  :show-file-list="false"
                  :headers=Authorization
                  name="fileName"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload">
                  <img v-if="imageUrl" :src="imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
              </td>
            </tr>
          </table>
          <el-button type="primary" :disabled="buttonDisable" class="qrtt" @click="onSubmit">确认提现</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { getWithdrawDetailAPI , getBankListAPI , getMessageCodeAPI,submitWithdrawAPI,getListWithdrawAPI} from "@/api/user";
import { mapGetters } from "vuex";
import md5 from 'js-md5';
import { getToken } from "@/utils/auth"; // get token from cookie
import { DebounceBy } from "@/utils/index"
//import moment from 'moment'
export default {
  // 角色管理
  name: "VersionSystem",
  data() {
    return {
      show: true,
      count: '',
      timer: null,
      showUploadTr:false,//是否显示上传组件
      buttonDisable:false,//确认提现按钮，默认置灰
      bankvalue:'',//下拉框中选择的银行的id
      invoiceUrl:'', // 电子发票地址
      Authorization:'',
      radioValue:'',
      password:'',//密码
      msgInput:'',// 短信验证码输入
      inputMoney:'',// 用户输入的提现金额
      inputExpected:'', // 预计到账
      showPassword:false,
      showPhone:true,
      alipayShow:false,
      alipay:'',
      alipayId:'',//点击提交按钮，传递支付宝ID
      uploadUrl:  this.UPLOADURL,
      radio:'',
      showUpload:false,
      imageUrl:'',
      formInline: {
        name: "",
        version: "",
        remark: "", // 版本更新说明
        page: 1,
        pagenum: 10,
        total: 0,
        min:0, // 最少提现金额
        updatepath: "", // 增量包路径
        fullpath: "", // 安装包路径
        currentVersion: "" // 当前版本号
      },
      formInlineCash:{
        type:''
      },
      options: [
        {
          value: "1",
          label: "客户端"
        },
        {
          value: "2",
          label: "android"
        },
        {
          value: "3",
          label: "IOS"
        }
      ],
      dialog: {
        status: false,
        id: null
      },
      loading: false,
      tableData: []
    };
  },
  computed: {
    ...mapGetters(["buttons"])
  },
  methods: {
    allMoney(){
      this.inputMoney = this.formInline.account
      this.moneyChange()
    },
    // 截取小数点后两位
    subStringTwoNum(obj){
      debugger
      obj = obj.toString()
      if(obj.indexOf(".") != -1){
        let index = obj.indexOf(".")
        let subStringLength = obj.substring(index+1,obj.length)
        if(subStringLength.length > 2){
          obj = obj.substring(0,obj.indexOf(".")+3);
        }
        let arr = obj.split(".")
        if(arr[1] == '0' || arr[1] == '00'){
          obj = arr[0]
        }
        if(arr[1].length>1){
          if(arr[1][1] == '0'){
            obj = obj.substring(0,obj.indexOf(".")+2);
          }
        }
      }
      return obj
    },
    moneyChange(){
      debugger
      var re = /^[0-9]+.?[0-9]*/;//判断字符串是否为数字//判断正整数/[1−9]+[0−9]∗]∗/
      // 如果有小数点，取小数点的后两位
      if(re.test(this.inputMoney)){/*if(!isNaN(this.inputMoney)){*/
        // 如果有小数点
        this.inputMoney = this.subStringTwoNum(this.inputMoney)
      }else{
        this.$message.error('请输入数字类型')
      }
      let perent = 0
      if(this.radio == 1){
        perent = this.formInline.alipayFee
      }else{
        perent = this.formInline.busisFee
      }

      this.inputExpected = this.inputMoney* (1 - perent)
      let expe = this.inputExpected.toString()
      this.inputExpected = this.subStringTwoNum(expe)
    },
    changeValidate(){
      if(this.showPassword == true){
        this.showPassword = false
        this.showPhone = true
      }else{
        this.showPassword = true
        this.showPhone = false
      }
    },
    // 发票方式发生修改时候的事件
    radioChange(value){
      // 当选择不提供发票
      if(value == 1){
        this.showUpload = false
        this.showUploadTr = false
        this.alipayShow = true
        this.getList(value)
        this.invoiceUrl = '' // 图片上传地址置空
        this.radioValue = 1
        // 当选择提供电子发票
      }else if(value == 2){
        this.showUploadTr = true
        this.showUpload = true
        this.alipayShow = false
        this.getList(value)
        this.radioValue = 1
      }else{
        // 当选择邮寄发票
        this.showUploadTr = false
        this.showUpload = true
        this.alipayShow = false
        this.invoiceUrl = ''// 图片上传地址置空
        this.getList(2)
        this.radioValue = ''
      }
      this.moneyChange()
    },
    getMsgCode(){
      const TIME_COUNT = 60;
      if (!this.timer) {
        this.count = TIME_COUNT;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= TIME_COUNT) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
          }
        }, 1000)
      }
      getMessageCodeAPI({withdrawType:this.radio}).then(res => {
        this.btnLoading = false;
        if (res.rtnInfo.code === 0) {
          this.$message.success("发送成功");
        } else {
          this.$message.error(res.message);
        }
      });
    },
    // 密码发生改变，就把验证码清空
    passwordChange(){
      this.msgInput = ''
    }
    ,
    // 验证码发生改变，就把密码清空
    codeChange(){
      this.password = ''
    },
    // 防抖
    onSubmit:DebounceBy(function(){
      this.btnLoading = true;
      //首先第一轮，判断是否为空
      if(this.inputMoney == '' || this.inputMoney == null){
        this.$message.error('提现金额不能为空')
        return
      }
      if(this.radio == '' || this.radio == 0){
        this.$message.error('请选择提供发票类型')
        return
      }
      if(this.msgInput == '' || this.msgInput == 0){
        this.$message.error('请输入验证码')
        return
      }

      // 判断提现金额，是否大于可提现金额
      if(this.inputMoney > this.formInline.account){
        this.$message.error('提现金额不能大于可提现金额')
        return
      }
      // 判断是否是数字类型
      var re = /^[0-9]+.?[0-9]*/;//判断字符串是否为数字//判断正整数/[1−9]+[0−9]∗]∗/
      // 如果有小数点，取小数点的后两位
      if(!re.test(this.inputMoney)){/*if(!isNaN(this.inputMoney)){*/
        this.$message.error('请输入数字类型')
        return
      }else{
        this.formInline.min = Number(this.formInline.min)
        this.inputMoney = Number(this.inputMoney)
        if(this.inputMoney < 0){
          this.$message.error('提现金额不能为负数')
          return
        }else if (this.inputMoney < this.formInline.min){
          this.$message.error('提现金额不能小于最低提现金额'+ this.formInline.min + '元')
          return
        }
      }
      // 如果用户密码不为空，就md5加密
      if(this.password != '' && this.password != null){
        this.password = md5(this.password)
      }else{
        this.password = ''
      }
      // 如果用户选择的支付宝，withdrawType就等于支付宝的账号；如果选择的是银行卡，就是银行卡的大写拼音简写
      let payId = ''
      if(this.radio == 1){ // 支付宝
          payId = this.alipayId
      }else if(this.radio == 2 || this.radio == 3){
        if(this.radio == 2){
          if(this.invoiceUrl == '' || this.invoiceUrl == null){
            this.$message.error('上传电子发票图片不能为空')
            return
          }
        }
        payId = this.bankvalue
      }
          let param = {
            payPwd: this.password,    // 支付密码
            smsCode: this.msgInput,   //短信验证码 两者取其一
            amount: this.inputMoney,      //提现金额
            withdrawType:payId ,         //提现方式id
            invoice:this.radio, //是否提供发票 0不提供 1邮寄纸质发票，3电子发票
            invoiceUrl:this.invoiceUrl//电子发票地址
          }
          submitWithdrawAPI(param).then(res => {
            this.btnLoading = false;
            if (res.rtnInfo.code === 0) {
              //this.$message.success("发布成功");
              this.$alert('提现申请将在7个工作日内审核', '申请提现成功', {
                confirmButtonText: '确定',
                callback: action => {
                  // 刷新页面
                  location.reload()
                }
              });
              //this.formInline = "";
              //this.getWhthdrea();

            } else {
              this.$message.error(res.message);
            }
          });
    },3000),
    // 打开编辑页面
    openEdit(obj) {
      this.dialog.id = obj.id;
      this.dialog.status = true;
    },
    // 操作成功更新列表
    success() {
      this.getRoleList();
    },
    // 获取列表
    getWhthdrea() {
      this.loading = true;
      getWithdrawDetailAPI().then(res => {
        this.loading = false;
        if (res.rtnInfo.code === 0) {
          this.formInline = res.rtnInfo.data;
          if (this.formInline.canapply == true){
            this.buttonDisable = true
          }else{
            this.buttonDisable = false
          }
        } else {
          this.$message.error(res.message);
        }
      });
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
      this.invoiceUrl = res.rtnInfo.data[0]
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg';
      const isJPEG = file.type === 'image/jpg';
      const isPNG = file.type === 'image/png';
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG && !isPNG && !isJPEG) {
        this.$message.error('只支持jpg、jpeg、png格式文件');
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 2MB!');
      }
      return isLt2M && isJPG || isPNG || isJPEG;
    },
    close() {
      this.dialog.status = false;
      this.dialog.id = null;
    },

    // 点击查询事件
    query() {
      this.formInline.pageNum = 1;
      this.getList();
    },
    // 获取列表
    getList(value) {
      this.formInlineCash.type = value
      this.loading = true
      getListWithdrawAPI(this.formInlineCash).then(res => {
        this.loading = false
        if (res.rtnInfo.code === 0) {
          if(value == 1){
            for(let i = 0 ;i<res.rtnInfo.data.length;i++){
              this.alipay = res.rtnInfo.data[i].way+"(" + res.rtnInfo.data[i].account + ")"
              this.alipayId = res.rtnInfo.data[i].id
            }
          }else if(value == 2){
            this.tableData = res.rtnInfo.data
            for(let j=0;j<this.tableData.length;j++){
                this.tableData[j].account = this.tableData[j].account.substring(this.tableData[j].account.length-4,this.tableData[j].account.length)
                this.tableData[j].way = this.tableData[j].way + '(' + this.tableData[j].account + ')'
            }
          }
          this.tableData = res.rtnInfo.data
        } else {
          this.$message.error(res.message)
        }
      })
    }
  },
  mounted() {
    this.getWhthdrea()
    this.Authorization={Authorization:getToken()}
  }
};
</script>
<style>
.ver_hed {
    width: 1200px;
    height: 93px;
    border-top: 1px solid lightgrey;
    border-bottom: 1px solid lightgrey;
    padding: 10px;
}
table.verhed_tab {
    margin-left: 65px;
    height: 67px;
}
.tixian {
  width: 1086px;
  height: 80px;
  margin-top: 32px;
  margin-left: 108px;
}
.tx_inp.el-input {
    width: 100px;
}
span.tx_lef{
  margin-left:-5px;
}
span.tx_rig {
    display: inline-block;
    margin-left: 164px;
}
.xxqr_tab {
    margin-left: 100px;

}
.xxqr_tab table {
  width: 100%;
  height: 100px;
}
.txdt_tab button{
  margin-left:600px;
}
.txdt_tab table{
  width: 600px;
    height: 241px;
    margin-left: 102px;
}
.txjl .el-row {
    float: left;
}
 .txjl input.el-input__inner {
    width: 100px;
    margin-top: 4px;
    margin-left: 10px;
}
.txjl label.el-form-item__label {
    margin-left: 797px;
    margin-top: -89px;
}
.input_s22{
  margin-top:20px;
}
.input_s22 {
    position: absolute;
    /* margin-top: -22px; */
    margin-top: -50px;
    margin-left: -14px;
}
.jl_tab table {
    width: 1000px;
    height: 72px;
    margin-left: 48px;
    maargin-top: -71px;
}
.jlsj {
    height: 57px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
button.el-button.qrtt.el-button--primary {
    margin-left: 22%;
    margin-top: 24px;
}
.elinput.el-input {
  width: 120px;
}
.widddd4{
  width:120px;
}
</style>

